<!DOCTYPE HTML>
<html>
    <body style="background-color: whitesmoke;">
        <h1>This is the first heading.</h1>
        <h2>This is the second heading.</h2>
        <h3>This is the third heading.</h3>
        <h4>This is this the fourth heading.</h4>
        <h5>This is this the fifth heading.</h5>
        <h6>This is this the sixth heading.</h6>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
        <a href ="https://baidu.com">百度的链接</a>
        <br/>
        <img src="/home/bqh/图片/timg.jpeg" width="200" height="142"/>
        <!--建议使用style代替 <h1 align="center">居中标题</h1> -->
        <table border="1"></table>
        <hr/>
        <p>This is<br/>a paragraph.</p>
        <h2 style="background-color: red;">这是一个二级标题</h2>
        <p style="background-color: green;">这是一个绿色的段落</p>
        <h1 style="font-family: verdana;">字体为veranan的一级标题</h1>
        <p style="font-family: arial; color:red; font-size: 20px;">
            一个字体为arial样式，颜色为红色，大小为20px的段落。
        </p>
        <h1 style="text-align: center;">居中标题</h1>
        <p>This is a <big>big</big> font.</p>

        <!-- 文本格式化 -->
        <b>This text is bold 粗体</b>
        <br />
        <strong>This text is strong 加重语气</strong>
        <br />
        <big>This text is big 大号字</big>
        <br />
        <em>This text is emphasized 着重文字</em>
        <br />
        <i>This text is italic 斜体</i>
        <br />
        <small>This text is small 小号字</small>
        <br />
        This text contains
        <sub>subscript 下标</sub>
        <br />
        This text contains
        <sup>superscript 上标</sup>
        
        <!-- 预格式文本 可以保留空格 -->
        <pre>
            这是
            预格式文本。
            它保留了      空格
            和换行。
        </pre>
            
        <p>pre 标签很适合显示计算机代码：</p>
            
        <pre>
            for i = 1 to 10
                 print i
            next i
        </pre>

        <!-- “计算机输出”标签 -->
        <code>Computer code</code>
        <br />
        <kbd>Keyboard input</kbd>
        <br />
        <tt>Teletype text</tt>
        <br />
        <samp>Sample text</samp>
        <br />
        <var>Computer variable</var>
        <br />

        <p> <b>注释：</b>这些标签常用于显示计算机/编程代码。</p>
        
        <!-- 地址 -->
        <address>
            Written by <a href="mailto:qingheban@qq.com">banqinghe</a>.<br> 
            Visit us at:<br/>
            Example.com<br/>
            Box 564, Disneyland<br/>
            USA
        </address>
        <br/>

        <!-- 缩写和首字母缩写 -->
        <abbr title="etcetera">etc.</abbr>
        <br />
        <acronym title="World Wide Web">WWW</acronym>

        <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
        <p>仅对于 IE 5 中的 acronym 元素有效。</p>
        <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
        <br/>

        <!-- 文字方向 -->
        <p>
        如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
        </p>
        
        <bdo dir="rtl">
        Here is some Hebrew text
        </bdo>
        <br/>

        <!-- 块引用 -->
        这是长的引用：
        <blockquote>
        这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
        </blockquote>

        这是短的引用：
        <q> 这是短的引用。</q>

        <p> 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。</p>
        <br/>

        <!-- 删除字效果和插入字效果 -->
        <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

        <p>大多数浏览器会改写为删除文本和下划线文本。</p>

        <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
        
    </body>
</html>